<template>
    <div class="price-root">
        <router-link 
            class="price-item" 
            :to="{path:'/hunter/dingdan',query:{is:i}}" 
            v-for="(p,i) in proInfo.price.type"
        >
            <p class="type">{{p.type}}</p>
            <p class="price"><span class="qian">￥</span>{{p.price}}<span class="sufix">/位</span></p>
            <p class="msg">{{p.msg}}</p>
        </router-link>
    </div>
</template>

<script>
import {mapState} from 'vuex';
export default {
    computed:{
        ...mapState([
            "proInfo",
            "isActive"
        ])
    },
    mounted:function(){
        var params = {
            pro_id:this.$route.query._id
        };
        this.$store.dispatch("requestProInfo",params)
        .then(res=>{
            this.$store.commit("setProInfo",res.data.data);
            this.$store.commit("setIsLoading",false);
        });
    },
    methods:{
        
    }
}
</script>

<style scoped>
.price-root{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #fff;
}
.price-item{
    display: block;
    text-align: center;
    margin:10vw 0 15vw; 
    border-bottom: 1px solid #eee;
    padding-bottom: 5vw;
}
.type{
    font-size: 1rem;
    color: #5c5c5c;
}
.price{
    color: #f36700;
    font-size: 1.9rem;
    margin: 1rem;
}
.qian{
    font-size: 0.9rem;
    position: relative;
    top:-1rem;
    left: 0.3rem;
}
.sufix{
    font-size: 1rem;
}
.msg{
    color: #b0b0b0;
    font-weight: 300;
    font-size: 0.8rem;
}
</style>